<template>
	<view>
		<view class="top-box">
			<view class="top-wrap">
				<view class="title-box">费用概况</view>
				<view class="item-box">
					<view class="all-data">
						<u-grid :col="1" :border="false">
							<u-grid-item :custom-style="{ padding: '0rpx 0' }">
								<view class="grid-num">{{cost}}</view>
								<view class="grid-text">总费用(元)</view>
							</u-grid-item>
						</u-grid>
					</view>
					<u-grid :col="3" :border="false">
						<u-grid-item :custom-style="{ padding: '0rpx 0' }">
							<view class="grid-num">{{cost}}</view>
							<view class="grid-text">本月费用</view>
						</u-grid-item>
						<u-grid-item :custom-style="{ padding: '0rpx 0' }">
							<view class="grid-num">{{total}}</view>
							<view class="grid-text">运输次数</view>
						</u-grid-item>
						<u-grid-item :custom-style="{ padding: '0rpx 0' }">
							<view class="grid-num">{{allnumber}}</view>
							<view class="grid-text">车辆数量</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<view class="info-data">
			<view class="info-box">
				<!-- 				<u-row gutter="0">
					<u-col span="4">
						<view class="info-left">所属公司</view>
					</u-col>
					<u-col span="8">
						<view class="info-right">{{userInfo.depName}}</view>
					</u-col>
				</u-row>
				<u-line color="#efefef" /> -->
				<!-- <u-row gutter="0">
					<u-col span="4"><view class="info-left">公司地址</view></u-col>
					<u-col span="8"><view class="info-right">17754928306</view></u-col>
				</u-row> -->
				<u-line color="#efefef" />
				<u-row gutter="0">
					<u-col span="4">
						<view class="info-left">车队负责人</view>
					</u-col>
					<u-col span="8">
						<view class="info-right">{{userInfo.contact}}</view>
					</u-col>
				</u-row>
				<u-line color="#efefef" />
				<u-row gutter="0">
					<u-col span="4">
						<view class="info-left">负责人电话</view>
					</u-col>
					<u-col span="8">
						<view class="info-right">{{userInfo.phone}}</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="box-item">
			<u-cell-group :border="false">
				<u-cell-item @click="openData()" :icon-style="{ color: '#5c92ff' }" icon="grid-fill" title="数据报表"></u-cell-item>
				<u-cell-item @click="carManagement()" :icon-style="{ color: '#5c92ff' }" icon="car-fill" title="车辆管理"></u-cell-item>
				<u-cell-item v-if="userInfo.roleId == 3" @click="administrator()" :icon-style="{ color: '#5c92ff' }" icon="account-fill"
				 title="管理员"></u-cell-item>
			</u-cell-group>
		</view>
		<!-- <view class="chart-box">
			<view class="title-box">本月费用分析</view>
			<view class="charts-wrap">
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll="true" @touchstart="touchLineA"
				 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		getTeamInfo
	} from '@/api/motorcade.js'
	import {
		getReportData
	} from "@/api/dataReport.js"
	import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaColumn = null;
	export default {
		data() {
			return {
				// 用户信息
				userInfo: {},
				cWidth: '',
				cHeight: '',
				id: null,
				pixelRatio: 1,
				form: {
					action: 'total',
					teamId: uni.getStorageSync('teamId')
				},
				formAgin: {
					action: "count",
					group: "carId",
					teamId: uni.getStorageSync('teamId')
				},
				allnumber: null,
				total: 0,
				cost: 0,
				serverData: {
					categories: ['08/01', '08/02', '08/03', '08/04', '08/05', '08/06', '08/01', '08/02', '08/03', '08/04', '08/05',
						'08/06'
					],
					series: [{
							name: '运输次数',
							data: [35, 20, 25, 37, 4, 20, 35, 20, 25, 37, 4, 20],
							color: '#000000'
						},
						{
							name: '费用',
							data: [100, 80, 95, 150, 112, 100, 80, 95, 150, 112]
						}
					]
				}
			};
		},
		onLoad(option) {
			_self = this;
			//获取用户信息
			if (option) {
				this.userInfo = option
			} else {
				// this.getTeamData(uni.getStorageSync('user').id)
				_self.userInfo = uni.getStorageSync('user');
			}
			// _self.userInfo = uni.getStorageSync('user');
			// this.userInfo = option
			// console.log(option);

			this.cWidth = uni.upx2px(750);
			console.log(this.userInfo);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
			// this.id = option.teamId
			// console.log(option)
			if(option){
				this.form.teamId = this.form.teamId = option.teamId
			}
			

		},
		created() {
			this.getReport()
			if(!this.allnumber){
				this.getReportList()
			}
		},
		onShow() {},
		methods: {
			getTeamData(id) {
				getTeamInfo(id).then(res => {
					console.log(res)
					this.userInfo = res.result
				})
			},
			getReport() {
				getReportData(this.form).then(res => {
					console.log(res)
					this.total = parseInt(res.result.total)
				})
			},
			getReportList() {
				getReportData(this.formAgin).then(res => {
					res.result.forEach(item => {
						// item.count = parseInt(item.count)
						this.cost += item.cost
					})
					if (!this.allnumber) {
						this.allnumber = res.result.length
					}
				})
			},
			openData() {
				uni.navigateTo({
					// url: '../dataReport/motorcadeData/index'
					url: `../dataReport/motorcadeData/index?teamId=${uni.getStorageSync('teamId')}&projectId=${uni.getStorageSync('id')}`
				});
			},
			carManagement() {
				uni.navigateTo({
					url: './carManagement/index'
				});
			},
			getServerData() {
				this.showColumn('canvasLineA', this.serverData);
			},
			administrator() {
				uni.navigateTo({
					url: '../administrator/index'
				});
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self, // 传入this实例
					canvasId: canvasId, // 页面组件canvas-id
					type: 'line', //图表类型
					fontSize: 11,
					background: '#FFFFFF',
					padding: [20, 10, 10, 10], // 边距
					enableScroll: true, //是否开启图表可拖拽滚动
					pixelRatio: _self.pixelRatio, // 像素比
					animation: true, // 是否动画展示
					categories: chartData.categories, // 坐标轴列表
					series: chartData.series, //数据列表
					xAxis: {
						type: 'grid',
						gridType: 'dash',
						itemCount: 4, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7' //默认为 #A6A6A6
					},
					yAxis: {},
					dataLabel: true, //	是否在图表中显示数据标签内容值
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							width: (_self.cWidth * _self.pixelRatio * 0.45) / chartData.categories.length
						}
					}
				});
			},
			touchLineA(e) {
				canvaColumn.scrollStart(e);
			},
			moveLineA(e) {
				canvaColumn.scroll(e);
			},
			touchEndLineA(e) {
				canvaColumn.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.navbar-right {
		padding: 0px 40rpx;
		color: #ffffff;
	}

	.top-box {
		height: 250rpx;
		background-color: #5c92ff;
		position: relative;

		.top-wrap {
			width: 670rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			position: absolute;
			left: 50%;
			margin-left: -335rpx;
			bottom: -110rpx;
			padding: 10rpx;

			.item-box {
				padding-bottom: 10rpx;
			}
		}

		.title-box {
			font-size: 30rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 70rpx;
			letter-spacing: 0rpx;
			color: #5c92ff;
			font-weight: bold;
			height: 110rpx;
			padding: 20rpx 60rpx;
			position: relative;
			border-bottom: 1px solid rgb(239, 239, 239);
		}

		.title-box::before {
			content: '';
			position: absolute;
			width: 8rpx;
			height: 40rpx;
			background-color: #007aff;
			left: 40rpx;
			top: 35rpx;
		}

		.grid-num {
			font-weight: bold;
			font-size: 36rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
			color: #2c3240;
		}

		.grid-text {
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
			color: #646c7f;
			font-weight: bold;
		}

		.all-data {
			padding-bottom: 20rpx;

			.grid-num {
				font-weight: bold;
				font-size: 60rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0px;
				color: #ff4040;
			}
		}
	}

	.info-data {
		margin-top: 140rpx;

		.info-box {
			background-color: #ffffff;
			border-radius: 10rpx;
			margin-top: 40rpx;
			padding: 20rpx 40rpx;

			.info-left {
				font-size: 30rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 40rpx;
				letter-spacing: 1rpx;
				color: #b1b8c8;
				text-align: left;
				font-weight: bold;
				padding: 20rpx 0px;
			}

			.info-right {
				font-size: 30rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 40rpx;
				letter-spacing: 1rpx;
				color: #2c3240;
				padding: 20rpx 0px;
				text-align: left;
				font-weight: bold;
			}
		}
	}

	.box-item {
		margin-top: 20rpx;
	}

	.chart-box {
		.title-box {
			font-size: 30rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 70rpx;
			letter-spacing: 0rpx;
			color: #2c3240;
			font-weight: bold;
			height: 110rpx;
			padding: 20rpx 60rpx;
			position: relative;
			border-bottom: 1px solid rgb(239, 239, 239);
		}

		.title-box::before {
			content: '';
			position: absolute;
			width: 8rpx;
			height: 40rpx;
			background-color: #007aff;
			left: 40rpx;
			top: 35rpx;
		}

		.charts-wrap {
			height: 500rpx;
			padding-top: 20rpx;
			background-color: #ffffff;

			.charts {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
